<template>
  <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
    <!-- 主入口标签页 s -->
    <el-tabs
      v-if="$route.meta.isTab"
      v-model="mainTabsActiveName"
      :closable="true"
      @tab-click="selectedTabHandle"
      @tab-remove="removeTabHandle">
      <el-dropdown class="site-tabs__tools" :show-timeout="0">
        <i class="el-icon-arrow-down el-icon--right"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
          <el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tab-pane
        v-for="item in mainTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name">
        <el-card :body-style="siteContentViewHeight">
          <iframe
            v-if="item.type === 'iframe'"
            :src="item.iframeUrl"
            width="100%" height="100%" frameborder="0" scrolling="yes">
          </iframe>
          <keep-alive v-else>
            <router-view v-if="item.name === mainTabsActiveName" />
          </keep-alive>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!-- 主入口标签页 e -->
    <el-card v-else :body-style="siteContentViewHeight">
      <keep-alive>
        <router-view />
      </keep-alive>
    </el-card>
  </main>
</template>

<script lang="ts" setup>
  import {
    computed,
    ref,
    reactive,
    nextTick,
    provide
  } from 'vue'
  import { usecommonStore } from '../store/modules/common'
  import { isURL } from '@/utils/validate'
  import { useRouter, useRoute } from 'vue-router'
  import { } from '/' 

  const commonStore = usecommonStore();
  const router = useRouter();
  const route = useRoute();
  let siteContentViewHeight = reactive({})

  const documentClientHeight = computed(() => { return commonStore.documentClientHeight })
  let menuActiveName = computed({
    get () { return commonStore.menuActiveName },
    set (val: string) { commonStore.updateMenuActiveName(val) }
  })
  let mainTabs = computed({
    get () { return commonStore.mainTabs },
    set (val: any[]) { commonStore.updateMainTabs(val) }
  })
  let mainTabsActiveName = computed({
    get () { return commonStore.mainTabsActiveName },
    set (val: string) { commonStore.updateMainTabsActiveName(val) }
  })
  siteContentViewHeight = computed(() => {
    var height = documentClientHeight.value - 50 - 30 - 2
    if (route.meta.isTab) {
      height -= 40
      return isURL(route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
    }
    return { minHeight: height + 'px' }
  })
    
  function refresh() {

  }
  
  // tabs, 选中tab
  function selectedTabHandle (tab) {
    tab = mainTabs.value.filter(item => item.name === tab.name)
    if (tab.length >= 1) {
      router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
    }
  }

  // tabs, 删除tab
  function removeTabHandle (tabName) {
    mainTabs = mainTabs.filter(item => item.name !== tabName)
    if (mainTabs.length >= 1) {
      // 当前选中tab被删除
      if (tabName === mainTabsActiveName) {
        var tab = mainTabs[mainTabs.length - 1]
        router.push({ name: tab.name, query: tab.query, params: tab.params }, () => {
          mainTabsActiveName = route.name
        })
      }
    } else {
      menuActiveName = ''
      useRouter().push({ name: 'home' })
    }
  }
  // tabs, 关闭当前
  function tabsCloseCurrentHandle () {
    removeTabHandle(mainTabsActiveName)
  }
  // tabs, 关闭其它
  function tabsCloseOtherHandle () {
    mainTabs = mainTabs.filter(item => item.name === this.mainTabsActiveName)
  }
  // tabs, 关闭全部
  function tabsCloseAllHandle () {
    mainTabs.value = []
    menuActiveName.value = ''
    router.push({ name: 'home' })
  }
  // tabs, 刷新当前
  function tabsRefreshCurrentHandle () {
    var tab = route
    removeTabHandle(tab.name)
    nextTick(() => {
      router.push({ name: tab.name, query: tab.query, params: tab.params })
    })
  }
</script>

